<template>
	<div>
		<h1>后台管理系统登陆页面</h1>
		<el-form :model="formData">
			<el-form-item label="账号">
				<el-input v-model="formData.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="formData.password"></el-input>
			</el-form-item>
			<el-button type="primary" @click="onLoginClick">登陆</el-button>
		</el-form>
		<el-button @click="handleClick">请求测试</el-button>

		<h1>上传图片测试</h1>
		<hr />
		<div>
			<input type="file" @change="onChange" /><el-button
				@click="handleUploadClick"
				>提交</el-button
			>
		</div>
	</div>
</template>
<script>
import axios from 'axios'
import http from '@/utils/request'
export default {
	data() {
		return {
			formData: {
				username: 'wuxupeng',
				password: '123'
			}
		}
	},
	mounted() {
		http.post('/api/post-test', { data: '测试' }).then((res) => {
			console.log(res, 'res')
		})
	},
	methods: {
		handleClick() {
			http.post('/api/post-test', { data: '测试' }).then((res) => {
				console.log(res, 'res')
			})
		},
		onChange(e) {
			const target = e.target
			const files = target.files

			var reader = new FileReader()
			reader.readAsDataURL(files[0])
			reader.onload = function(e) {
				const imgURL = e.target.result
				// console.log(imgURL, 'imgURL')
				http.post('/api/upload', { file: imgURL }).then((res) => {
					console.log(res, 'res')
				})
			}

			// const fileReader = new FileReader()
			// fileReader.readAsDataURL(files[0])

			// fileReader.onload = function(e) {
			// 	// console.log(e.target.result, 'result')

			// }
		},
		async onLoginClick() {
			const loginData = await axios.post('/api/login', { ...this.formData })
			console.log('loginData', loginData.data.data.token)
			// token存入本地存储
			localStorage.setItem('token', loginData.data.data.token)

			this.$router.push('/article')
			// 跳转页面
		}
	}
}
</script>
